<template>
  <!-- 巡检管理--巡检历史-->
  <div class="content-area" style="position:relative;">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="search-area">
      <div class="search-content">
        <div class="search-item"><span>注册代码:</span>
          <el-input placeholder="请输入内容" v-model="searchData.registerCode" clearable></el-input>
        </div>
        <div class="search-item"><span>巡检编号:</span>
          <el-input placeholder="请输入内容" v-model="searchData.code" clearable></el-input>
        </div>
        <div class="search-item"><span>巡检人员:</span>
          <el-input placeholder="请输入内容" v-model="searchData.adminName" clearable></el-input>
        </div>
        <div class="search-item">
          <span>当前状态:</span>
          <el-select v-model="searchData.status" placeholder="请选择" clearable>
            <el-option v-for="item in statusArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <areaSelect v-on:getNowAreaPosition="getArea" :areaText="areaText"></areaSelect>
      </div>
      <div class="search-footer">
        <button class="search-btn" @click="lookupByConditions">查询</button>
      </div>
    </div>
    <!--内容-->
    <div class="main-content">
      <div class="content-info">
        <!-- 表格数据与翻页合并模块 -->
        <DataTable :childLoad="parentLoad" :dataTableObj="dataTableObj" v-on:getPageNo="searchByPageNo"  v-on:handlePageReload="pageReload"
                   v-on:getPageSize="searchByPageSize">
          <!--除查询外的操作-->
          <div slot="operate">
            <div class="some-operate">
              <!--<button class="some-btn">导出</button>-->
            </div>
          </div>
          <!-- 额外的操作以及其他因素 -->
          <!--巡检类型 超出长度出现悬浮框-->
          <el-table-column fixed="right" align="center" label="巡检类型" width="280">
            <template slot-scope="scope">
              <template v-if="scope.row.patrolPopShow">
                <el-popover ref="popover" placement="top" width="350" popper-class="el_pop standardPopo"
                            trigger="hover" :content="scope.row.patrolTypeId"></el-popover>
                <div v-popover:popover>
                  <div class="item-names over-flow">
                    {{scope.row.patrolTypeId}}
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="item-names">
                  {{scope.row.patrolTypeId}}
                </div>
              </template>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="状态" width="70">
            <template slot-scope="scope">
              <div class="item-names">{{scope.row.statusConst}}</div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="是否逾期" width="70">
            <template slot-scope="scope">
              <div class="item-names">{{scope.row.invalidedName}}</div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="完成时间" width="90">
            <template slot-scope="scope">
              <div class="item-names">{{scope.row.endDate}}</div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="90" v-if="pagePower['005003001']">
            <template slot-scope="scope">
              <div class="item-route">
                <div class="item-route-link" @click="$goRoute('/manage/examineMgr/examineHistory/examineHistoryDetail?type=detail&code='+ scope.row.code+'&status='+ scope.row.status)">
                  查看详情
                </div>
              </div>
            </template>
          </el-table-column>

        </DataTable>
      </div>
    </div>
  </div>
</template>
<script>
  // 表格数据
  import DataTable from "../../../components/dataTable/dataTable"
  import areaSelect from "../../../components/areaSelect/areaSelect"
  import com from "../../../js/common"
  import HeadTop from "../../../components/head-top/head-top"
  import {getExamineRecord} from '@/api/getData'

  export default {
    name: 'examineRecord',
    components: {
      DataTable,
      areaSelect,
      HeadTop
    },
    data() {
      return {
        parentLoad: '加载中...',    // 加载状态
        pagePower: JSON.parse(com.getStore('pagePowers'))['005003'] ? JSON.parse(com.getStore('pagePowers'))['005003'] : {},
        // 搜索区域数据
        statusArr: [
          {
            value: '-2',
            label: '全部'
          }, {
            value: '5',
            label: '意见审核中'
          }, {
            value: '6',
            label: '意见已审核'
          }, {
            value: '7',
            label: '意见已退回'
          }, {
            value: '4',
            label: '巡检完成'
          }
        ],
        searchData: {
          registerCode: '',
          adminName: '',
          argsName: '',
          status: '-2',
          code: '',
          areaCode: '', // 查询地区code
          elevatorId: '',
        },

        // 表格组件数据
        dataTableObj: {
          multipleSelection: [],
          // 表格数据
          tableData: [],
          // 表格标题
          tableColumns: [
            {
              text: '序号',
              width: '45',
              attributeName: 'index'
            },
            {
              text: '巡检编号',
              width: '120',
              attributeName: 'code'
            },
            {
              text: '电梯注册代码',
              width: '140',
              attributeName: 'registerCode'
            },
            {
              text: '电梯地址',
              width: '130',
              attributeName: 'field4'
            },
            {
              text: '巡检发起人',
              width: '80',
              attributeName: 'updateUserName'
            },
            {
              text: '巡检人员',
              width: '80',
              attributeName: 'adminName'
            }
          ],

          // 翻页所需数据
          pageObj: {
            // 每页分为几条数据
            pageSize: 10,
            // 总共多少数据
            pageNum: 0,
            //当前页
            pageNo: 1,
            searchStatus: 2,
          },
          checkIds: [],
        },

        // 区域选择
        areaText: '区域选择:',
      }
    },
    mounted() {
      if (this.$route.query.id) {
        this.searchData.elevatorId = this.$route.query.id;
      }
      // 获取当前页面所需数据
      this.getExamineRecordData()
    },
    methods: {
      // 获取页面所需数据
      getExamineRecordData(obj) {
        this.dataTableObj.pageObj.searchStatus = 2
        this.dataTableObj.tableData = []
        if (this.searchData.status == '') {
          this.searchData.status = '-2';
        }
        getExamineRecord({
          pageNo: this.dataTableObj.pageObj.pageNo,
          pageSize: this.dataTableObj.pageObj.pageSize,
          condition: this.searchData,
        }).then((data) => {
          this.dataTableObj.pageObj.searchStatus = 1
          let startPage = (this.dataTableObj.pageObj.pageNo - 1) * this.dataTableObj.pageObj.pageSize;
          let info = data.data.data;
          let infoArr = info.data;
          if (infoArr.length > 0) {
            let statusArr = this.statusArr;
            infoArr.forEach(function (i, t) {
              i.index = startPage + t + 1;
              i.endDate = i.endDate ? i.endDate.substring(0, 10) : i.endDate;
              i.patrolPopShow = i.patrolTypeId.length > 20;
              i.invalidedName = i.invalided === 0 ? '未逾期' : '已逾期';
              i.adminName = i.adminName === null ? '--' : i.adminName;
              statusArr.forEach((j) => {
                if (i.status == j.value) {
                  i.statusConst = j.label;
                }
              })
            })
          } else {
            this.parentLoad = '暂无数据'    // loading(暂无数据)
          }
          this.dataTableObj.tableData = infoArr;
          this.dataTableObj.pageObj.pageNum = info.totalRecord;
        }).catch((data) => {
          this.parentLoad = data.data.message    // loading(查询失败)
          this.dataTableObj.pageObj.searchStatus = 0
        })
      },

      // 查询条件
      lookupByConditions: function () {
        this.getExamineRecordData();
      },

      // 每页多少内容
      searchByPageSize(val) {
        this.dataTableObj.pageObj.pageSize = val;
        this.getExamineRecordData()
      },

      // 切换第几页
      searchByPageNo(val) {
        this.dataTableObj.pageObj.pageNo = val;
        this.getExamineRecordData()
      },

      // 获取查询地址
      getArea(res) {
        this.searchData.areaCode = res.code
      },

      // 页面刷新
      pageReload(){
        this.getExamineRecordData();
      }
    }
  }
</script>
<style lang="scss" type="text/scss">
  @import "../../../style/entry/components/pageCommon";
  @import "../../../style/entry/components/tdOver";
</style>
